<template>
  <el-card>
    图表
    <div id="buyTop" style="width: 100%;height:90%;"></div>
  </el-card>
</template>

<script>
import echarts from 'echarts' // 引入Echarts/

export default {
  name: 'tubiao_list.vue',
  data() {
    return {
      data: [],
      dom: null
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    // 画图
    draw() {
      this.data = [
        { name: '京哈高速', value: 10 },
        { name: '京哈高速1', value: 20 },
        { name: '京哈高速2', value: 30 },
        { name: '京哈高速3', value: 40 },
        { name: '京哈高速4', value: 50 },
        { name: '京哈高速5', value: 60 },
        { name: '京哈高速6', value: 70 },
        { name: '京哈高速7', value: 80 },
        { name: '京哈高速8', value: 90 },
        { name: '京哈高速9', value: 100 },
        { name: '京哈高速10', value: 110 },
        { name: '京哈高速11', value: 120 }
      ]
      // 拼轴显示和数据的数组
      let xAxisText = []
      let dataList = []
      this.data.forEach(item => {
        xAxisText.push(item.name)
        dataList.push(item.value)
      })
      let buyTop = echarts.init(document.getElementById('buyTop')) // 图表容器
      // console.log(buyTop)
      const VALUE1 = [{ // 每个柱子的颜色（可自行改变颜色）
        // eslint-disable-next-line no-undef
        value: dataList[0],
        itemStyle: {
          color: 'rgba(0,137,255,1.0)'
        }
      },
      {
        // eslint-disable-next-line no-undef
        value: dataList[1],
        itemStyle: {
          color: 'rgba(0,25,255,1.0)'
        }
      },
      {
        // eslint-disable-next-line no-undef
        value: dataList[2],
        itemStyle: {
          color: 'rgba(115,5,255,1.0)'
        }
      },
      {
        // eslint-disable-next-line no-undef
        value: dataList[3],
        itemStyle: {
          color: 'rgba(215,1,255,1.0)'
        }
      },
      {
        value: dataList[4],
        itemStyle: {
          color: 'rgba(182,105,86,1.0)'
        }
      }
      ]
      const VALUE2 = [{ // 最高值的柱子颜色  就是你所看到的透明那部分
        value: Math.max.apply(null, dataList), // 这个value是柱状图的值里的最大值
        itemStyle: {
          color: 'rgba(0,137,255,.1)'
        }
      },
      {
        value: Math.max.apply(null, dataList),
        itemStyle: {
          color: 'rgba(0,25,255,.1)'
        }
      },
      {
        value: Math.max.apply(null, dataList),
        itemStyle: {
          color: 'rgba(115,5,255,.1)'
        }
      },
      {
        value: Math.max.apply(null, dataList),
        itemStyle: {
          color: 'rgba(215,1,255,.1)'
        }
      },
      {
        value: Math.max.apply(null, dataList),
        itemStyle: {
          color: 'rgba(182,105,86,.1)'
        }
      }
      ]
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 13, shape.y - 13]
          const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
          const c4 = [shape.x + 18, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 18, shape.y - 9]
          const c3 = [shape.x + 5, shape.y - 22]
          const c4 = [shape.x - 13, shape.y - 13]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      // const MAX = [300, 300, 300, 300, 300]
      const VALUE = dataList
      let buyTopOption = {
        backgroundColor: 'transparent',
        tooltip: {
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12
          },
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)'
                }],
                global: false
              }
            }
          },
          formatter: function (params, ticket, callback) {
            const item = params[1]
            return item.name + ' : ' + item.value + '人'
          }
        },
        grid: { // 图表的上下左右的距离
          left: '1%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          padding: '0 0 0 0',
          containLabel: true
        },
        xAxis: { // x轴的样式设置
          type: 'category',
          data: xAxisText,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255, 168, 1,1.0)'
            }
          },
          offset: 20,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            margin: 0,
            textStyle: {
              color: '#7B4D9F',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          }
        },
        yAxis: { // y轴的样式设置
          type: 'value',
          name: '人数',
          nameTextStyle: {
            color: '#7B4D9F',
            fontSize: 15,
            offset: [2, -25]
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#7B4D9F'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 16
          },
          boundaryGap: false
        },
        series: [{ // 下面就是柱状图的每个柱的颜色设置
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: api.style().fill
                  },
                  {
                    offset: 1,
                    color: 'rgba(210, 218, 226,1.0)'
                  }
                  ])
                }
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: api.style().fill
                  },
                  {
                    offset: 1,
                    color: 'rgba(210, 218, 226,1.0)'
                  }
                  ])
                }
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: api.style().fill
                  },
                  {
                    offset: 1,
                    color: api.style().fill
                  }
                  ])
                }
              }
              ]
            }
          },
          data: VALUE2
        }, {
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: api.style().fill
                  },
                  {
                    offset: 1,
                    color: 'rgba(210, 218, 226,1.0)'
                  }
                  ])
                }
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: api.style().fill
                  },
                  {
                    offset: 1,
                    color: 'rgba(210, 218, 226,1.0)'
                  }
                  ])
                }
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: api.style().fill
                  },
                  {
                    offset: 1,
                    color: api.style().fill
                  }
                  ])
                }
              }
              ]
            }
          },
          data: VALUE1
        },
        {
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              fontSize: 14,
              color: '#fff',
              offset: [2, -25]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {

          },
          data: VALUE
        }]
      }
      buyTop.setOption(buyTopOption)
    }

  }
}
</script>

<style lang="less" scoped>
</style>
